<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
  <button type="submit" id="but1">提交请求</button>
  <button type="submit" id="but2">取消请求</button>
  <script>
    const oBntget = document.getElementById('but1')
    const oBntcancel = document.getElementById('but2')
    let cancel;
    let token;
    //拿到一个取消请求的对象(是一个构造函数)
    const CancelToken = axios.CancelToken;
    //实列化axios 配置对象
    const myAxios = axios.create({
      //配置对象
      baseURL: '/', //配置公共路径
      timeout: 10000, //配置请求超时时间
      headers: {

      }, //配置发送的自定义请求头
    })
    // 添加请求拦截器
    myAxios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      // 增加一个token令牌
      token = 'safshafasgafaf.sdsadsadafgsa'
      config.headers.token = token
      // 增加进度条
      NProgress.start();
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error.message);
    });
    // 添加响应拦截器
    myAxios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      //让进度条结束
      NProgress.done();
      return response.data;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error.message);
    });
    //绑定事件
    oBntget.onclick = async function () {
      try {
        const result = await myAxios.get('/getUser', {
          params: {
            useId: '001'
          },
          //在配置对象中配置一个cancelToken的配置项,值是实例化的CancelToken对象
          cancelToken: new CancelToken((c) => {
            //当请求发送的时候,这个回调函数会被执行,并接受一个参数,这个参数其实就是取消当前请求的函数
            cancel = c;
            //一旦请求被中断,则会交给catch处理这个异常
          })
        })
        console.log('result', result);

      } catch (e) {
        console.log(e,'错误');
      }
    }
    //取消请求点击事件
    oBntcancel.onclick = function () {
      cancel()
    }
  </script>
</body>

</html>